<template>
  <div class="main-content">
    <div class="screen-frame clearfix">
      <div class="form-horizontal">

        <ul class="auditSearch">
          <!-- <div class="col-md-8 col-sm-10"> -->
          <li class="li">
            <span class="span">部门</span>
            <Cascader :data="options"
                      v-model="auditInfo.deptId"
                      class="searchItem departSearch"
                      filterable
                      clearable
                      change-on-select
                      placeholder="请选择部门"
                      @on-change="selectDept"></Cascader>
          </li>
          <li class="li">
            <span class="span">经纪人</span>
            <Input v-model="auditInfo.partnerInfo"
                   class="searchItem"
                   clearable
                   placeholder="请输入姓名/手机号" />
          </li>
          <li class="li">
            <span class="span">审核状态</span>
            <Select class="searchItem departSearch"
                    v-model="auditInfo.checkStatus"
                    clearable
                    placeholder="请选择状态">
              <Option v-for="item in statusList"
                      :value="item.value"
                      :key="item.value">{{ item.label }}</Option>
            </Select>
          </li>
          <button type="button"
                  @click="searchRoleResource"
                  class="btn btn-default btn-theme">查询</button>
        </ul>
      </div>
    </div>
    <div class="table-responsive report-table">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>序号</th>
            <th>部门</th>
            <th>姓名</th>
            <th>手机</th>
            <th>注册时间</th>
            <th>审核状态</th>
            <th>审核人</th>
            <th>审核时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in roleRows">
            <td>{{index + 1}}</td>
            <td>{{row.deptName}}</td>
            <td>{{row.userName}}</td>
            <td>{{row.phone}}</td>
            <td>{{row.regesiterTime}}</td>
            <td>{{row.checkStatus | filterStatus(statusList)}}</td>
            <td>{{row.checkUserName}}</td>
            <td>{{row.checkTime}}</td>
            <td>
              <a href="javascript:void(0)"
                 @click="modelShow(row)"
                 class="btnA edit">查看</a>
              <a href="javascript:void(0)"
                 @click="modelShow(row,true)"
                 v-if="row.checkStatus==='0'"
                 class="btnA edit">审核</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="laypage_div"></div>
    <lookAudit :roleModal="selectInfo"
               :editModal="editModal"
               @saveReturn='saveReturn'></lookAudit>
  </div>
</template>

<script>
import lookAudit from "./lookAudit.vue";

export default {
  data() {
    return {
      accountType: window.localStorage.getItem("4_accountType"),
      roleRows: [],
      auditInfo: { deptId: [], partnerInfo: "", checkStatus: "" },
      roleId: "",
      roleName: "",
      pageInfo: {
        pageNo: 1,
        pageSize: 10
      },
      editModal: false,
      options: [],
      statusList: [
        {
          value: "0",
          label: "待审核"
        },
        {
          value: "1",
          label: "审核失败"
        },
        {
          value: "2",
          label: "审核成功"
        }
      ],
      selectInfo: {}
    };
  },
  components: {
    lookAudit
  },
  filters: {
    filterStatus(v, data) {
      let res = data.find((item) => {
        return item.value === v;
      });
      return res.label || "";
    }
  },
  created() {
    this.initList();
    this.getDepartList();
  },
  methods: {
    selectDept(value, selectedData) {
      this.auditInfo.deptId = value;
    },
    getDepartList() {
      var url = this.utilHelper.apiUrl + "/api/getLevelDeptTree";
      this.$http.post(url, { params: {} }).then(
        (response) => {
          if (response.body.result === "1") {
            this.options = response.body.resData.deptTreeResDtoList || [];
          }
        },
        (response) => {}
      );
    },
    initList() {
      var _self = this;
      const params = {
        pageNo: _self.pageInfo.pageNo,
        pageSize: _self.pageInfo.pageSize,
        deptId: this.auditInfo.deptId.length
          ? this.auditInfo.deptId[this.auditInfo.deptId.length - 1]
          : "",
        partnerInfo: this.auditInfo.partnerInfo,
        checkStatus: this.auditInfo.checkStatus
      };
      var url = _self.utilHelper.apiUrl + "/api/getCheckList";
      _self.$http.post(url, { params }).then(
        (response) => {
          if (response.body.result === "1") {
            const data = response.body.resData.partnerCheckResDtoPage;
            var total = (data && data.total) || 0;
            this.roleRows = (data && data.rows) || [];
          }
          //加载分页组件
          layui.laypage.render({
            elem: $("#laypage_div"), //容器。值支持id名、原生dom对象，jquery对象,
            curr: _self.pageInfo.pageNo,
            limit: 10,
            count: total,
            theme: "#f87242",
            first: "首页", //若不显示，设置false即可
            last: "尾页", //若不显示，设置false即可
            prev: "上一页", //若不显示，设置false即可
            next: "下一页", //若不显示，设置false即可
            layout: ["prev", "page", "next", "skip", "count"],
            jump: function (obj, first) {
              if (!first) {
                _self.pageInfo.pageNo = obj.curr;
                _self.initList();
              }
            }
          });
        },
        (response) => {}
      );
    },
    searchRoleResource() {
      this.pageInfo.pageNo = 1;
      this.initList();
    },
    modelShow(data, edit) {
      this.selectInfo = data;
      $("#lookModal").modal("show");
      if (edit) {
        if (data.checkStatus === "0") {
          this.editModal = true;
        } else {
          this.editModal = false;
        }
      } else {
        this.editModal = false;
      }
    },
    saveReturn() {
      this.initList();
      $("#lookModal").modal("hide");
    }
  }
};
</script>
<style lang="less">
.auditSearch {
  .departSearch {
    .ivu-input {
      border: 1px solid #ccc;
    }
    .ivu-cascader-arrow,
    .ivu-select-arrow {
      top: 70%;
      display: block;
    }
    .ivu-select-dropdown {
      .ivu-cascader-menu-item {
        i {
          top: 70%;
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
.main-content {
  .auditSearch {
    margin: 0 0px 15px 15px;
    .li {
      float: left;
      margin-right: 20px;
      font-size: 14px;
      line-height: 34px;
      .span {
        float: left;
        margin-right: 5px;
      }
      .searchItem {
        width: 150px !important;
      }
    }
    .departSearch {
      display: inline-block;
    }
  }
}
</style>
